<template>
	<div>
		<component :is="f.getVNode()"></component>
		<el-button @click="get">get</el-button>
		<el-button @click="add">add</el-button>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { BasicFormBox } from "@pkg";
import { baseService } from "@/server/base";
let key = ref(true);
//获取省份、直辖市地区
const getAddress = async (data?: any) => {
	let arr: any[] = [];
	if (data?.dataArr) {
		data.dataArr.forEach((k: any) => {
			arr.push({
				label: k.name,
				value: k.id,
				id: k.id,
			});
		});
	} else if (data?.townArr) {
		data.townArr.forEach((k: any) => {
			arr.push({
				label: k.name,
				value: k.id,
				id: k.id,
				leaf: true,
			});
		});
	} else {
		let res = await baseService.inquireArea(data.value);
		if (res.success) {
			JSON.parse(res.data).forEach((k: any) => {
				arr.push({
					label: k.name,
					value: k.id,
					id: k.id,
					townArr: k.townSub,
				});
			});
		}
	}
	return arr;
};

const getProvinceData = async () => {
	let res = await baseService.inquireArea();
	let data = JSON.parse(res.data).map((e: any) => {
		return {
			label: e.name,
			value: e.id,
			id: e.id,
			dataArr: e.provinceSub,
		};
	});
	localStorage.setItem("optData", JSON.stringify(data));
};

const f = new BasicFormBox<{ test: any[] }>({
	options: [],
});
const data: any = localStorage.getItem("optData");

f.addFormItem({
	component: "Cascader",
	label: "级联",
	value: [],
	key: "test",
	conf: {
		options: JSON.parse(data),
		lazy: {
			lazy: true,
			lazyLoad: async (node: any, result: any) => {
				const arr = await getAddress(node.data);
				console.log(arr, "arr");
				result(arr);
			},
		},
	},
});

const get = () => {
	console.log(f.getFormValue(), "ddddddddddddd");
};

const add = () => {
	f.setFormItemValue("test", [1, 2, 5]);
};
</script>

<style lang="scss" scoped></style>
